<script setup lang="ts">
import { ref, inject, onMounted } from 'vue'
import type { AddressEditInstance } from 'vant'
import { areaList } from '@vant/area-data'

const $toast: any = inject('$toast', () => {})
const searchResult = ref([])
const addressEdit = ref<AddressEditInstance>()

onMounted(() => {
  console.log(addressEdit.value)
  // vant提供的地址选择组件，因为设计稿原因，需要对高度重新定义
  const vanPicker = document.getElementsByClassName('van-picker__columns')[0] as HTMLImageElement
  vanPicker.style.height = '500px'
})

const onSave = () => $toast('save')
const onDelete = () => $toast('delete')
const onChangeDetail = (val: string) => {
  console.log(val)
}
</script>
<template>
  <div class="address-edit">
    <van-address-edit
      ref="addressEdit"
      :area-list="areaList"
      show-delete
      show-set-default
      show-search-result
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
      @change-detail="onChangeDetail"
    />
  </div>
</template>
<style lang="scss" scoped>
.address-edit {
}

:deep(.van-picker__columns) {
  height: 500px !important;
}
</style>